<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="1046px"
      title="设备配置"
      wrapClassName="equiment-modal-container"
      @cancel="closeModal()"
    >
      <div class="equiment-modal-body flex">
        <!-- 未选设备 -->
        <div class="no-choose-container flex">
          <div class="transfer-header flex">
            未选设备<a-checkbox @change="allCheck()" v-model="isAllCheck">
              全选
            </a-checkbox>
          </div>
          <div class="transfer-container flex">
            <div class="filter-container">
              <a-row>
                <!-- 项目名称 allowClear-->
                <a-col :span="24">
                  <a-select
                    v-model="form.tenantCode"
                    placeholder="请选择项目名称"
                    :loading="form.proNameLoading"
                    @change="proNameChange($event)"
                  >
                    <a-select-option
                      :value="item.tenantCode"
                      v-for="item in form.proNameSource"
                      :key="item.tenantCode"
                    >
                      {{ item.proName }}
                    </a-select-option>
                  </a-select>
                </a-col>
                <!-- 标段名称 -->
                <a-col :span="12">
                  <a-select
                    v-model="form.orgCode"
                    placeholder="请选择标段名称"
                    :loading="form.blockLoading"
                    @change="blockChange($event)"
                  >
                    <a-select-option
                      :value="item.orgCode"
                      v-for="item in form.blockNameSource"
                      :key="item.orgCode"
                    >
                      {{ item.orgName }}
                    </a-select-option>
                  </a-select>
                </a-col>
                <!-- 设备名称 -->
                <a-col :span="12">
                  <div class="input flex">
                    <input
                      type="text"
                      placeholder="请输入设备名称"
                      v-model="form.equName"
                    />
                    <bj-icon-font
                      type="search"
                      color="#8A8A8C"
                      :size="18"
                      @click="queryEquList()"
                    ></bj-icon-font>
                  </div>
                </a-col>
              </a-row>
            </div>
            <div class="table-container" v-loading="tableLoading">
              <vxe-table
                align="center"
                :data="tableSource"
                show-overflow
                show-header-overflow
                show-footer-overflow
                show-footer
                :column-config="{ resizable: true }"
                class="scrollbarStyle"
                height="99%"
                :sort-config="{ trigger: 'cell' }"
                ref="xTable"
                :scroll-x="{ gt: 10 }"
                :scroll-y="{ gt: 100 }"
                row-id="id"
                :checkbox-config="{
                  reserve: true,
                }"
                @checkbox-all="selectAllEvent"
                @checkbox-change="tableChange"
              >
                <vxe-column type="checkbox" width="60"></vxe-column>
                <vxe-column type="seq" title="序号" width="80"></vxe-column>
                <vxe-column
                  :title="item.title"
                  :field="item.key"
                  :key="index"
                  :min-width="item.width"
                  show-overflow
                  v-for="(item, index) in tableColumns"
                ></vxe-column>
              </vxe-table>
            </div>
          </div>
        </div>
        <div class="transfer-button">
          <div
            class="button"
            :class="choosedEquList.length == 0 && 'dis'"
            @click="transferData()"
          ></div>
        </div>
        <!-- 已选设备 -->
        <div class="choose-container">
          <div class="transfer-header flex">
            已选设备
            <span class="clear-all" @click="clearChoosedData()">全部清空</span>
          </div>
          <div class="transfer-container" v-loading="haseLoading">
            <a-empty :image="simpleImage" v-if="hasChoosedData.length == 0" />
            <div
              class="choosed-people"
              v-for="item in hasChoosedData"
              :key="item.id"
            >
              <span>{{ item.equName }}</span>
              <span class="colose" @click="removeItem(item)">
                <bj-icon-font
                  type="close"
                  color="#fff"
                  :size="12"
                ></bj-icon-font>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="form-footer flex">
        <a-button type="default" @click="closeModal()">取消 </a-button>
        <a-button
          type="primary"
          :loading="loading"
          :disabled="hasChoosedData.length == 0"
          @click="submit()"
        >
          提交
        </a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { queryEquList, addEquiment } from "@/api/user-center/roleManage.js";
import {
  getProjectList,
  getBlockList,
} from "@/api/user-center/equipmentManage.js";
import { getLoginData } from "@/tools";
import { Empty } from "ant-design-vue";
export default {
  name: "equipmentConfig",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [Number, String],
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      //全选
      isAllCheck: false,
      form: {
        //项目名称
        tenantCode: undefined,
        proNameSource: [],
        proNameLoading: false,
        //标段名称
        orgCode: undefined,
        blockNameSource: [],
        blockLoading: false,
        //设备名称
        equName: undefined,
      },
      tableLoading: false,
      tableSource: [],
      tableColumns: [
        {
          title: "设备编号",
          dataIndex: "equNum",
          key: "equNum",
          width: "",
        },
        {
          title: "设备名称",
          dataIndex: "equName",
          key: "equName",
          width: "",
        },
        {
          title: "设备类型",
          dataIndex: "equTypeDesc",
          key: "equTypeDesc",
          width: "",
        },
      ],
      //已选设备列表
      choosedEquList: [],
      //右侧数据
      hasChoosedData: [],
      haseLoading: false,
    };
  },
  beforeCreate() {
    this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getProjectList();
          this.queryHasEquList();
          this.queryEquList();
        }
      },
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    //提交
    submit() {
      let equIds = this.hasChoosedData.map((v) => v.id);
      this.loading = true;
      addEquiment({ equIds: equIds.toString(), roleId: this.id })
        .then((res) => {
          this.$message.success("操作成功！");
          this.$parent.refreshData();
          this.closeModal();
        })
        .catch((_) => {
          this.$message.error("操作失败，请稍后重试~");
        })
        .finally((_) => {
          this.loading = false;
        });
    },

    //查询设备列表【全部】
    queryEquList() {
      this.tableLoading = true;
      let { tenantCode = "", orgCode = "", equName = "" } = this.form;
      queryEquList({
        tenantCode,
        orgCode,
        equName,
      })
        .then((res) => {
          let { data } = res;
          this.tableSource = data?.result || [];
        })
        .catch((_) => {
          this.tableSource = [];
        })
        .finally((_) => {
          this.isAllCheck = false;
          this.tableLoading = false;
          this.choosedEquList = [];
          this.$refs?.xTable?.clearCheckboxRow();
        });
    },

    //查询设备列表【已选择】
    queryHasEquList() {
      let { id } = this;
      this.haseLoading = true;
      queryEquList({
        roleId: id,
      })
        .then((res) => {
          let { data } = res;
          this.hasChoosedData = data?.result || [];
          let ids = this.hasChoosedData.map((v) => v.id);
          this.tableSource = this.tableSource.filter(
            (v) => !ids.includes(v.id)
          );
        })
        .catch((_) => {
          this.hasChoosedData = [];
        })
        .finally((_) => {
          this.haseLoading = false;
        });
    },

    //监听表格选择
    tableChange({ checked, row }) {
      this.getSelectEvent();
    },
    selectAllEvent({ checked }) {
      //全选
      if (checked) {
        this.choosedEquList = this.tableSource;
      } else {
        //取消全选
        this.choosedEquList = [];
      }
    },

    //获取table选中项
    getSelectEvent() {
      let selectRecords = this.$refs.xTable.getCheckboxRecords();
      this.choosedEquList = selectRecords;
    },

    //全选
    allCheck() {
      let { isAllCheck } = this;
      //全选
      if (isAllCheck) {
        this.$refs.xTable.setAllCheckboxRow(true);
        this.choosedEquList = this.tableSource;
      } else {
        //取消全选
        this.choosedEquList = [];
        this.$refs.xTable.clearCheckboxRow();
      }
    },

    //【查询条件】查询项目名称
    getProjectList() {
      this.form.proNameLoading = true;
      return new Promise((resolve, reject) => {
        let { userId } = getLoginData();
        getProjectList({ userId })
          .then((res) => {
            let { data } = res;
            this.form.proNameSource = data?.result || [];
            resolve();
          })
          .catch((_) => {
            this.form.proNameSource = [];
            reject();
          })
          .finally((_) => {
            this.form.proNameLoading = false;
          });
      });
    },

    //监听项目切换
    proNameChange() {
      this.form.orgCode = undefined;
      this.getBlockList();
      this.queryEquList();
    },

    //数据移动到右侧
    transferData() {
      if (this.choosedEquList.length > 0) {
        this.isAllCheck = false;
        this.hasChoosedData = this.hasChoosedData.concat(this.choosedEquList);
        let ids = this.choosedEquList.map((v) => v.id);
        this.tableSource = this.tableSource.filter((v) => !ids.includes(v.id));
        this.choosedEquList = [];
        this.$refs.xTable.clearCheckboxRow();
      }
    },

    //右侧数据-全部清空
    clearChoosedData() {
      this.tableSource = this.tableSource.concat(this.hasChoosedData);
      this.hasChoosedData = [];
    },

    //右侧单个删除
    removeItem(item) {
      let { id } = item;
      this.hasChoosedData = this.hasChoosedData.filter((v) => v.id != id);
      this.tableSource.push(item);
    },

    //【查询条件】查询标段名称
    getBlockList() {
      this.form.blockLoading = true;
      return new Promise((resolve, reject) => {
        let { userId } = getLoginData();
        let { tenantCode } = this.form;
        getBlockList({ userId, tenantCode })
          .then((res) => {
            let { data } = res;
            this.form.blockNameSource = data?.result || [];
            resolve();
          })
          .catch((_) => {
            this.form.blockNameSource = [];
            reject();
          })
          .finally((_) => {
            this.form.blockLoading = false;
          });
      });
    },

    //监听标段切换
    blockChange() {
      this.queryEquList();
    },

    //关闭弹窗
    closeModal() {
      this.form.tenantCode = undefined;
      this.form.orgCode = undefined;
      this.form.equName = undefined;
      this.tableSource = [];
      this.choosedEquList = [];
      this.isAllCheck = false;
      this.tableLoading = false;
      this.choosedEquList = [];
      this.$refs?.xTable?.clearCheckboxRow();
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.equiment-modal-container {
  .ant-modal-body {
    padding: 20px 60px;
    .equiment-modal-body {
      height: 424px;
      margin-bottom: 40px;
      .transfer-header {
        width: 100%;
        height: 36px;
        background: #f3f4f6;
        color: #2b2c30;
        padding: 0 10px;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        .clear-all {
          color: var(--primary-color);
          cursor: pointer;
        }
      }
      .no-choose-container {
        height: 100%;
        width: 560px;
        flex-shrink: 0;
        border: 1px solid #d4d7d8;
        border-radius: 4px;
        flex-direction: column;
        .transfer-container {
          flex: 1;
          overflow: hidden;
          padding: 10px;
          .flex();
          overflow: hidden;
          flex-direction: column;

          .filter-container {
            .ant-row {
              .ant-col {
                margin-bottom: 10px;
                &:last-child {
                  margin: 0;
                }
              }
            }
            .ant-select {
              width: 100%;
            }
            .input {
              height: 36px;
              background: #ffffff;
              border: 1px solid #d4d4d4;
              border-radius: 4px;
              overflow: hidden;
              margin-left: 10px;
              .bj-icon {
                .flex();
                align-items: center;
                padding: 0 6px;
                cursor: pointer;
              }
              input {
                flex: 1;
                height: 100%;
                line-height: 36px;
                border: none;
                padding: 0 10px;
              }
            }
          }
          .table-container {
            flex: 1;
          }
        }
      }
      .transfer-button {
        height: 100%;
        width: 70px;
        .flex();
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        .button {
          width: 46px;
          height: 28px;
          cursor: pointer;
          border-radius: 4px;
          background: var(--primary-color)
            url("https://jszhgd.cn/static/pc/transfer.png") no-repeat center
            center;
          background-size: 14px 10px;
          &.dis {
            background-color: #dcdcdc;
            cursor: not-allowed;
            &:active {
              opacity: 1;
            }
          }
        }
      }
      .choose-container {
        height: 100%;
        width: 300px;
        box-sizing: border-box;
        border: 1px solid #d4d7d8;
        border-radius: 4px;
        flex-shrink: 0;
        .flex();
        flex-direction: column;
        overflow: hidden;
        .transfer-container {
          padding: 10px 10px 0 0;
          position: relative;
          flex: 1;
          /deep/.ant-empty {
            margin: 0;
          }
          .custom-scrollbar();
          .choosed-people {
            float: left;
            min-width: 130px;
            height: 32px;
            background: #f1f2f7;
            border-radius: 4px;
            .flex();
            align-items: center;
            box-sizing: border-box;
            padding: 0 10px;
            color: var(--primary-color);
            margin: 0 0 10px 10px;
            .flex();
            justify-content: space-between;
            .colose {
              width: 12px;
              height: 12px;
              background: var(--primary-color);
              border-radius: 50%;
              .flex();
              align-items: center;
              justify-content: center;
              color: #fff;
              cursor: pointer;
              margin-left: 4px;
              /deep/.bj-icon {
                transform: scale(0.6) translateY(1px);
              }
            }
          }
        }
      }
    }
    .form-footer {
      justify-content: center;
    }
  }
}
</style>
